<template>
    <div class="Sys-content-box">
        <!--添加一级区域-->
        <div class="sys-content-head clear">
            <button class="add-btn" @click="addAera1"><span class="iconfont">+</span>添加{{configtypeMap[`${configtype}`].addTitle}}</button>
      <!--      <div class="serach-input">
                <el-input
                        :placeholder="configtypeMap[`${configtype}`].table1colTitle"
                        prefix-icon="el-icon-date"

                        v-model="serach1">
                </el-input>
                <el-input
                        :placeholder="configtypeMap[`${configtype}`].table2colTitle"
                        prefix-icon="el-icon-search"
                        v-model="serach2">
                </el-input>
                <el-button icon="el-icon-search" circle @click="serchConfig()"></el-button>
            </div>-->

        </div>
        <el-table
                v-if="configtype==='Area'||configtype==='Traffic1'||configtype==='TrafficBrt'"
                :data="showData"
                border
                style="width: 100%">
            <el-table-column
                    prop="location_sort"
                    label="排序"
                    width="80"
            align="center">
            </el-table-column>
            <el-table-column
                    :label="configtypeMap[`${configtype}`].table1colTitle"
                    width="180">
                <template slot-scope="scope">
                    <span class="color-item">{{scope.row.location_name}}</span><span>({{scope.row.locationList.length}})</span>

                </template>
            </el-table-column>
            <el-table-column
                    :label="configtypeMap[`${configtype}`].table2colTitle">
                <template slot-scope="scope">
                    <el-tag v-for="area in scope.row.locationList"  :key="area.label" type="info">{{area.location_name}}    <span v-if='deltagvisible' class="del-tag" @click="deltag(area)">x</span></el-tag>

                </template>
            </el-table-column>
            <el-table-column label="操作"  prop="locationList"  width="180">
                <template slot-scope="scope">
                    <el-button @click="editArea12(scope.row)" type="text" size="small">编辑</el-button>  <!--添加2级区域-->
                    <!-- <el-button @click="addAera2(scope.row)" type="text" size="small">添加块</el-button>-->
                    <el-button type="text" size="small" @click="deletearea1(scope.row)" v-if="">删除</el-button>
                    <el-button v-if='!deltagvisible' type="text" size="small" @click="deletearea2()">删除块</el-button> <el-button v-if='deltagvisible' type="text" size="small" @click="quitdeletearea2()">退出删除模式</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--添加通用-->
        <SysConfigAddDraw
                :childrenNum="locationNum"
                :visible="addDrawVisible"
                :initstate="addDrawVisible"
                :form="selectAreaData"
                :typetitle="configtypeMap[`${configtype}`]"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                :addOrEdit="addOrEditType"
                @onclose="closeAddDraw(arguments)"
        >
        </SysConfigAddDraw>

        <p class="total-size">总计<span>{{totalSize}}</span>条记录</p>
        <el-pagination

                :page-size="pageSize"
                @current-change="fenye"
                layout="prev, pager, next"
                :page-count="pageCount"
        >
        </el-pagination>
<!--        删除组件/-->
        <SysConfigDel
                :form="delItem"
                :title="delDialogTitle"
                :visible="delFormVisile"
                :nowtype="configtype"
                :drawUrl="nowUrl"
                @onclose="closedeldia(arguments)"
        >
        </SysConfigDel>
    </div>
</template>
<script>
    /*添加弹框引入*/
    import SysLoopAddForm  from '../components/SysLoopAddForm'
    import SysConfigAddDraw  from '../components/SysConfigAddDraw'
    import SysPerAddDraw  from '../components/SysPerAddDraw'
    import SysConfigDel  from '../components/SysConfigDel'


    export default {
        name: "SysAreaConfigPage",

        components:{
            SysConfigAddDraw,
            SysConfigDel,
            SysPerAddDraw,
            SysLoopAddForm
        },
        props:['configtype'],
        data() {
            return {
                totalSize:1,
                pageSize:10,
                //搜索
                serach1:'',
                serach2:'',
//标签内容map
                configtypeMap:{
                    Area:{
                        addTitle:'区域',
                        table1colTitle:'区/县级',
                        table2colTitle:'板块级'
                    },
                    Traffic1:{
                        addTitle:'轨道交通',
                        table1colTitle:'公交线',
                        table2colTitle:'站点'
                    },
                    TrafficBrt:{
                        addTitle:'BRT交通',
                        table1colTitle:'公交线',
                        table2colTitle:'站点'
                    },
                }
                ,
                /*添加弹框的数据*/
                addDrawVisible: false,
                selectAreaData: {},


                /*区域表格数据接受后端返回的已分页*/
                showData:[],
                pageCount:1,
                //当前页
                currentPage:1,
//删除组件
                delDialogTitle: "",
                delDialogTitleMap: {
                    Area:{
                        area1DelTile:'区',
                        area2DelTile:'块',
                    },
                    Traffic1:{
                        area1DelTile:'公交线',
                        area2DelTile:'站点',
                    },
                    TrafficBrt:{
                        area1DelTile:'公交线',
                        area2DelTile:'站点',
                    },
                },
                //修改子栏目
                addDialogTitle:'',
                //
                editTagvisible:false,
                //是否显示删除标签的图标
                deltagvisible:false,
                delFormVisile:false,
                delItem:{},
                //接口表
                atbUrl:{
                    Area:{
                        geturl:'/area/queryAreaOneLevel',
                        delurl:'/area/delArea',
                        addurl:'/area/addArea',
                        editurl:'/area/updateArea',
                    },
                    Traffic1:{
                        geturl:'/traffic/queryTrafficOneLevel',
                        delurl:'/traffic/delTraffic',
                        addurl:'/traffic/addTraffic',
                        editurl:'/traffic/updateTraffic',
                    },
                    TrafficBrt:{
                        geturl:'/traffic/queryTrafficOneLevel',
                        delurl:'/traffic/delTraffic',
                        addurl:'/traffic/addTraffic',
                        editurl:'/traffic/updateTraffic',
                    },
                },
                nowUrl:{},
                //操作类型
                addOrEditType:0,
                locationNum:'',
            };
        },
        methods: {
            //判断标签，url,
            whichurl(){
                // console.log(this.configtype)
                this.nowUrl=this.atbUrl[`${this.configtype}`]
                // console.log(this.nowUrl)
            },
            //删除

            deletearea1(item) {

                this.delDialogTitle = this.delDialogTitleMap[this.configtype].area1DelTile;

                //删除区

                this.delFormVisile = true;
                this.delItem = { ...item };
                // console.log('点击删除')
                // console.log(this.delItem)
            },
            closedeldia(e) {
                if (e[0]) {
                    //重新获取区块信息
                    //重新获取数据
                    this.serchConfig()
                } else {
                    this.$message({
                        type: "info",
                        message: "取消操作",
                    });
                }
                this.delFormVisile = false;
            },
            //打开删除标签
            deletearea2(){
                this.editTagvisible=false
                this.deltagvisible=true
            },
            quitdeletearea2(){
                this.deltagvisible=false
            },
            //删除标签
            deltag(item){
                //请求
                this.delDialogTitle = this.delDialogTitleMap[this.configtype].area2DelTile;
                this.delFormVisile = true;
                this.delItem = { ...item };
            },
            //分页
            fenye(val) {
                this.currentPage = val;
                //调用查询函数。
                this.serchConfig()
            },


            //批量编辑
          /*  whichAddFormVisible(is){
                if (this.configtype==='Property'){
                    this.peraddDrawVisible=is
                }
                else if (this.configtype==='Consulting')
                {

                    this.culaddDrawVisible=is

                }else {
                    this.addDrawVisible=is
                }
            },*/
            //打开编辑模式。
            edittag(item){
                this.selectAreaData={...item}
                this.addDrawVisible=true
              this.addDialogTitle = '修改子栏目'
            },
            //
            quitedit(){
                this.editTagvisible=false
            },
            editArea12(item){
                //显示
                    this.addDrawVisible=true

                    this.selectAreaData={
                        location_name:item.location_name,
                        location_sort:item.location_sort,
                        location_id:item.location_id,
                        locationList:[...item.locationList],
                    }
                    // console.log(this.selectAreaData)
                this.addOrEditType=2
                this.locationNum=this.selectAreaData.locationList.length

            },

            //添加区域配置弹框
            addAera1(){
                // console.log('addddddddddddddddddddddd')
                this.addOrEditType=1
                this.addDrawVisible=true
                    this.selectAreaData={
                        location_name:'',
                        location_sort:0,
                        locationList:[],
                    }
                this.locationNum=this.selectAreaData.locationList.length
            },
            //添加块
            addAera2(item){


            },
            closeAddDraw(e){
                this.addDrawVisible=false
                this.addOrEditType=0
                if (!e[0]){
                    this.$message({
                        type:'info',
                        message:'取消操作'
                    })

                }else{
                    //重新获取数据
                    this.serchConfig()
                }

            },
            getAreaData(url,data){
               // /* this.showData=areaData;*/
               //  console.log('`````url`````')
               //  console.log(url)
                this.axios({
                    url:url,
                    method:'get',
                    params:data
                }).then(data=>{
                    // console.log('获取全部数据')
                    // console.log(data)
                    this.showData=data.data.dataList
                    this.pageCount=data.data.totalPage
                    this.totalSize=data.data.totalSize
                })
            },

            //查询
            serchConfig(){
                switch (this.configtype) {
                    case 'Area':this.getAreaData(this.nowUrl.geturl,{limit:this.pageSize,page:this.currentPage});break;
                    case 'Traffic1':this.getAreaData(this.nowUrl.geturl,{limit:this.pageSize,page:this.currentPage,location_type:'轨道交通'});
                        break;
                    case 'TrafficBrt':this.getAreaData(this.nowUrl.geturl,{limit:this.pageSize,page:this.currentPage,location_type:'BRT交通'});
                        break;
                }
            }
        },
        created() {
            this.whichurl();
           this.serchConfig()

        }

    }
</script>

<style lang="less">
.Sys-content-box{
    .el-pagination{
        position: absolute;

        margin: -40px 20px 40px;
    }
    .sys-content-head{

        margin: 0;
        >button{
            float: left;
        }
        >div.serach-input{
            float: right;
            .el-input{
                width: 30%;
                margin: 0 20px;
            }
        }

    }

    .el-tag {

        cursor: pointer;
        background-color: rgba(255, 225, 205, 0.23);
        margin:5px 10px;
        transition: all .2s;
        &:hover{
            background-color: #ff9d2b;
            color: white;
            transform: scale(1.1);
        }
    }
    .del-tag{
        padding: 0 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    .color-item{
        color: chocolate;
    }
.el-table{
    padding-bottom: 100px;

}
}


</style>